<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">退款/售后</block> 
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="order_list_a">
				<view class="order_list_a_a" @click="tabsChange(0)" :class="current==0?'order_list_a_aa':''">
					处理中
					<view v-if="current==0" class="order_list_a_a_a"></view>
				</view>
				<view class="order_list_a_a" @click="tabsChange(1)" :class="current==1?'order_list_a_aa':''">
					已处理
					<view v-if="current==1" class="order_list_a_a_a"></view>
				</view>
			</view>
			<view class="order_a" v-if="afterSaleType=='normal'">
				<view class="order_a_a" v-for="(item, index) in orderList" :key="index">
					<view class="order_a_a_b" v-for="(item1, index1) in item.order_goods" :key="index1">
						<view style="overflow: hidden;">
							<view class="order_a_a_b_a">
								<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="8rpx" lazy-load :src="item1.image"></custom-image>
							</view>
							<view class="order_a_a_b_b">
								<view class="order_a_a_b_b_a">{{item1.goods_name}}</view>
								<view class="order_a_a_b_b_b">规格：{{item1.spec_value_str}}</view>
								<view class="order_a_a_b_b_c">
									<view class="order_a_a_b_b_c_a">
										<view class="order_a_a_b_b_c_a_a" v-if="item1.integral==0 && item1.goods_price>0">
											<span>¥</span>{{item1.goods_price}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price==0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price>0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}+<span>¥</span>{{item1.goods_price}}
										</view>
									</view>
									<view class="order_a_a_b_b_c_b">
										X{{item1.goods_num}}
									</view>
								</view>
							</view>
						</view>
						<view class="user_money_log_b_c" v-if="item.after_sale.able_apply == 1">
							<view class="user_money_log_b_c_b" v-if="item.after_sale.able_apply==1" @click="goPage('/pages/apply_refund/apply_refund?order_id='+item.order_id+'&item_id='+item1.item_id)" style="background-color: #fff;border:1rpx solid #E71102;color:#E71102;">申请售后</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_a" v-if="afterSaleType=='apply'">
				<view class="order_a_a" v-for="(item, index) in orderList" :key="index">
					<view class="order_a_a_a">
						<view class="order_a_a_a_a">
							申请时间：{{item.time}}
						</view>
						<view class="order_a_a_a_b">
							{{item.after_sale.desc}}
						</view>
					</view>
					<view class="order_a_a_b" v-for="(item1, index1) in item.order_goods" :key="index1">
						<view style="overflow: hidden;" @click="goPage('/pages/after_sales_detail/after_sales_detail?afterSaleId=' + item.after_sale.after_sale_id + '&order_id=' + item.order_id)">
							<view class="order_a_a_b_a">
								<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="8rpx" lazy-load :src="item1.image"></custom-image>
							</view>
							<view class="order_a_a_b_b">
								<view class="order_a_a_b_b_a">{{item1.goods_name}}</view>
								<view class="order_a_a_b_b_b">规格：{{item1.spec_value_str}}</view>
								<view class="order_a_a_b_b_c">
									<view class="order_a_a_b_b_c_a">
										<view class="order_a_a_b_b_c_a_a" v-if="item1.integral==0 && item1.goods_price>0">
											<span>¥</span>{{item1.goods_price}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price==0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price>0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}+<span>¥</span>{{item1.goods_price}}
										</view>
									</view>
									<view class="order_a_a_b_b_c_b">
										X{{item1.goods_num}}
									</view>
								</view>
							</view>
						</view>
						<view class="user_money_log_b_c" v-if="item.after_sale.status==1 || item.after_sale.status==4">
							<view class="user_money_log_b_c_b" @click="goPage('/pages/apply_refund/apply_refund?order_id=' + item.order_id + '&afterSaleId=' +
							item.after_sale.after_sale_id + '&item_id=' + item1.item_id)">重新申请</view>
							<view class="user_money_log_b_c_b" @tap="showdialog_click(item.after_sale.after_sale_id)" style="background-color:#62469B;">撤销申请</view>
						</view>
					</view>
					<view class="user_money_log_b_c" v-if="item.after_sale.status==2">
						<view class="user_money_log_b_c_b" @click="goPage('/pages/input_express_info/input_express_info?id=' + item.after_sale.after_sale_id)">填写快递单号</view>
					</view>
				</view>
			</view>
			<view class="order_a" v-if="afterSaleType=='finish'">
				<view class="order_a_a" v-for="(item, index) in orderList" :key="index">
					<view class="order_a_a_a">
						<view class="order_a_a_a_a">
							申请时间：{{item.time}}
						</view>
						<view class="order_a_a_a_b">
							{{item.after_sale.desc}}
						</view>
					</view>
					<view class="order_a_a_b" @click="goPage('/pages/after_sales_detail/after_sales_detail?afterSaleId=' + item.after_sale.after_sale_id + '&order_id=' + item.order_id)" v-for="(item1, index1) in item.order_goods" :key="index1">
						<view style="overflow: hidden;">
							<view class="order_a_a_b_a">
								<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="8rpx" lazy-load :src="item1.image"></custom-image>
							</view>
							<view class="order_a_a_b_b">
								<view class="order_a_a_b_b_a">{{item1.goods_name}}</view>
								<view class="order_a_a_b_b_b">规格：{{item1.spec_value_str}}</view>
								<view class="order_a_a_b_b_c">
									<view class="order_a_a_b_b_c_a">
										<view class="order_a_a_b_b_c_a_a" v-if="item1.integral==0 && item1.goods_price>0">
											<span>¥</span>{{item1.goods_price}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price==0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}
										</view>
										<view class="order_a_a_b_b_c_a_a" v-if="item1.goods_price>0 && item1.integral>0">
											<span>积分</span>{{item1.integral}}+<span>¥</span>{{item1.goods_price}}
										</view>
									</view>
									<view class="order_a_a_b_b_c_b">
										X{{item1.goods_num}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无售后数据</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import {
	loadingType,
	AfterSaleType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:false,
			uid:0,
			CustomBarh:0,
			current:0,
			list: ['处理中', '已处理'],
			keyword:'',
			orderList:[],
			status: loadingType.LOADING,
			page: 1,
			limit:8,
			type:0,
			afterSaleType:AfterSaleType.NORMAL,
			orderId:0,
		}
	},
	onLoad: function(options) {
		this.current =options.current?options.current:0;
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.CustomBarh=this.CustomBar;
		this.onRefresh();
	},
	onReachBottom: function() {
		this.getOrderListFun();
	},
	created() {
	  uni.$on("refreshsale", () => {
	    this.onRefresh();
	  });
	},
	destroyed: function () {
	  uni.$off("refreshsale");
	},
	mounted() {
		//this.home_post();
	},
	methods: {
		showdialog_click(after_sale_id){
			let _this=this;
			uni.showModal({
				title: '提示',
				content: '您确认是否要撤销申请？',
				success: function (res) {
					if (res.confirm) {
						_this.showdialog_post(after_sale_id);
					}
				}
			});
		},
		showdialog_post(after_sale_id){
			let paramsList = {
				uid:this.uid,
				id:after_sale_id
			}
			let optsList = {
				url: 'us-cancel',
				method: 'post'
			};
			uni.showLoading({
				title: '撤销中',
				mask: true
			})
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if(res.data.code == 200){
					uni.$emit("refreshsale");
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
						duration: 2000
					});
				}
			});
		},
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		tabsChange(index) {
			this.current = index;
			this.onRefresh();
		},
		onRefresh() {
			this.page = 1
			this.orderList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getOrderListFun();
			});
		},
		async getOrderListFun() {
			let {
				page,
				limit,
				orderList,
				current,
				keyword,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			
			this.afterSaleType = AfterSaleType.NORMAL
			switch(current) {
			    case 0:
					this.afterSaleType = AfterSaleType.HANDLING;
			        break;
			    case 1:
			        this.afterSaleType = AfterSaleType.FINISH;
			        break;
			}
			const paramsList = {
				page: page,
				limit:limit,
				type:this.afterSaleType,
				keyword:keyword,
				uid:this.uid
			}
			let optsList = {
				url: 'us-lists',
				method: 'get'
			};
			let _this=this;
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) orderList = []
					let {
						list,
						more
					} = res.data.data
					this.orderList.push(...list)
					this.page = ++this.page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.orderList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				_this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.order_list_a {
		height: 90rpx;
		line-height: 90rpx;
		width: 700rpx;
		margin-top: 20rpx;
	}
	.order_list_a_a {
		width: 50%;
		float: left;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#FFFFFF;
		position: relative;
		text-align: center;
	}
	.order_list_a_aa {
		color: #CC8FBE;
		font-size: 32rpx;
	}
	.order_list_a_a_a {
		position: absolute;
		height: 8rpx;
		bottom: 5rpx;
		background-color:#CC8EBC;
		width: 48rpx;
		left: 50%;
		margin-left: -24rpx;
	}
	.header_wrap{
		background: #F7F7F7;
		overflow: hidden;
		box-sizing: border-box;
	}
	.sousuo{
		width: 750rpx;
		margin: auto;
		background-color: #ffffff;
		display: block;
	}
	.article_list_b{
		height: 79rpx;
		width: 750rpx;
		margin: auto;
		overflow: hidden;
		padding: 0 10rpx;
	}
	.article_list_b_a{
		text-align: center;
		float: left;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
		height: 79rpx;
		margin-left: 40rpx;
		line-height: 79rpx;
	}
	.article_list_b_a_a{
		width: 37rpx;
		height: 6rpx;
		background: #3F78F6;
		border-radius: 3rpx;
		margin: auto;
		margin-top: -2px;
	}
	.article_list_b_aa{
		color: #227BE5;
	}
	.mr10{
		margin-right: 10rpx;
	}
	.order_a{
		overflow: hidden;
	}
	.order_a_a{
		width: 700rpx;
		height: auto;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 33rpx;
		overflow: hidden;
	}
	.order_a_a_a{
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	.order_a_a_a_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		display: flex;
		align-items: center;
	}
	.order_a_a_a_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CD8FBE;
	}
	.order_a_a_b{
		overflow: hidden;
	}
	.order_a_a_b_a{
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		float: left;
	}
	.order_a_a_b_b{
		float: right;
		width: 485rpx;
		height:auto;
		overflow: hidden;
	}
	.order_a_a_b_b_a{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		overflow: hidden;
		height: 40rpx;
		line-height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.order_a_a_b_b_b{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		overflow: hidden;
		margin-top: 10rpx;
	}
	.order_a_a_b_b_c_a{
		float: left;
	}
	.order_a_a_b_b_c_a_a{
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6000;
	}
	.order_a_a_b_b_c_a_a span{
		font-size: 24rpx;
	}
	.order_a_a_b_b_c_b{
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
	}
	.order_a_a_b_b_c{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3F4B;
		margin-top: 10rpx;
	}
	.order_a_a_b_b_c span{
		font-size: 24rpx;
	}
	.order_a_a_b_b_c_b{
		float:right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
	}
	.order_a_b{
		margin-top: 30rpx;
		line-height: 30rpx;
		overflow: hidden;
		width: 100%;
	}
	.order_a_b_a{
		float:right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.order_a_b_b{
		float:right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#222222;
		margin-left: 20rpx;
	}
	.order_a_b_b span{
		font-size: 24rpx;
	}
	
	.order_a_a_c{
		margin-top: 20rpx;
		text-align: right;
		
	}
	
	.order_a_a_d{
		display: flex;
		align-items: center;
		height: 60rpx;
		margin-top: 30rpx;
	}
	.order_a_a_d_a{
		width: 164rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #EE8824;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EE8824;
		margin-left: 20rpx;
	}
	.order_a_a_d_aa{
		border: 1rpx solid #CCCCCC;
		color: #666666;
	}
	.order_a_a_e{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}
	
	.order_a_a_f{
		overflow: hidden;
	}
	.order_a_a_f_a{
		width: 230rpx;
		height: 230rpx;
		float: left;
		margin-right:6rpx;
		margin-top: 23rpx;
	}
	.order_a_a_f_a image:nth-child(3){
		margin-right: 0;
	}
	.user_money_log_b_c{
		height: 60rpx;
		margin-top: 25rpx;
		overflow: hidden;
	}
	.user_money_log_b_c span{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF3F4B;
	}
	
	.user_money_log_b_c_b{
		width: 160rpx;
		height: 60rpx;
		background:#CD8FBE;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		float: right;
		margin-left: 10rpx;
	}
</style>
